

var fieldLabel1 = new Array('日'
);
var fieldLabel = new Array("综合电压合格率","A类","B类",
"C类","D类","D类城市居民端","D类直供农村居民端"
);
var fieldName1=new Array("ZHbr",
"Abr",
"Bbr",
"Cbr",
"Dbr",
"DCbr",
"DNbr"
);

var fieldLabel12 = new Array("月"
);
var fieldLabel22 = new Array("综合电压合格率","A类","B类",
"C类","D类","D类城市居民端","D类直供农村居民端"
);
var fieldName2=new Array("ZHby",
"Aby",
"Bby",
"Cby",
"Dby",
"DCby",
"DNby"
);

var record_start = 0;
var store;
var theme = '告警';
var now = new Date();
var beginDate = now.format('Y');
var endDate=now.add(Date.YEAR,-1).format('Y');


var dateFrom = {
    xtype: 'datefield',
    id: 'DateFrom',
    format: 'Y年m月d日',
    width: 150,
    value:now.add(Date.MONTH,-1),
    listeners: {
        select: function(c, date) {
            beginDate = date.format('Y-m');
            store.baseParams.beginDate = beginDate;
        }
    }  
}

var dateTo={
    xtype: 'datefield',
    id: 'DateTo',
    format: 'Y年m月d日',
    width: 150,
    value:now,
    listeners: {
        select: function(c, date) {
            beginDate = date.format('Y-m-d');
            store.baseParams.beginDate = beginDate;
        }
    }
}

var centergridstore=new Ext.data.JsonStore({               
    //data: [
    //       ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17']
    //]
    url:"../../servlet/report/voltagesummary",
    root: 'data',
    idProperty: 'id',
    totalProperty: 'count',
    fields: fieldName1,
    autoLoad: true
        
});
var centergridcolModel= new Ext.grid.ColumnModel({
    columns: [
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
    ],
                                            
    defaultSortable: true,
    rows: [
        [
            {
                width: 100, 
                header: fieldLabel[0], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[1], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[2], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[3], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[4], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[5], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[6], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            },  
        ]
        
    ]
});
        
        
        
        
var centergrid = new Ext.grid.GridPanel({
    title: '日合格率展示',
    store: centergridstore,
    colModel:centergridcolModel,
    enableColumnMove: false,
    height: 400,
    width:'50%',
    region: 'center',
    frame:true,  
    plugins: [new Ext.ux.plugins.GroupHeaderGrid()],   
    loadMask: true,
    
    tbar: new Ext.Toolbar([
        {
            text: "选择日期：", 
            xtype: 'label', 
            style: {
                marginLeft: '20px'
            }
        },
        dateTo,
        '-',
        {
            xtype: 'button',
            text: '搜索',
            iconCls: 'icon-search',
            width: 60,
            style: {
                marginLeft: '20px'
            },
            handler: function() {
                store.load({
                    params: {
                        start: 0, 
                        limit: _pageSize
                    }
                });
            }
        },
        '-',
        {
            xtype: 'button',
            text: '导出',
            iconCls: 'icon-search',
            width: 60,
            style: {
                marginLeft: '20px'
            },
            handler: downloadExcel
        },
    ])
});

var eastgridstore=new Ext.data.JsonStore({               
    //data: [
    //       ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17']
    //]
    url:"../../servlet/report/voltagesummary",
    root: 'data',
    idProperty: 'id',
    totalProperty: 'count',
    fields: fieldName1,
    autoLoad: true
        
});
var eastgridcolModel= new Ext.grid.ColumnModel({
    columns: [
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
        {
            header: fieldLabel1[0], 
            width: 100, 
            dataIndex: fieldName[0], 
            align: 'center'
        },   
    ],
                                            
    defaultSortable: true,
    rows: [
        [
            {
                width: 100, 
                header: fieldLabel[0], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[1], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[2], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[3], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[4], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[5], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            }, 
            {
                width: 100, 
                header: fieldLabel[6], 
                colspan: 1, 
                align: 'center',
                rowspan:1
            },  
        ]
        
    ]
});



var eastgrid=new Ext.grid.GridPanel({
    title: '月合格率展示',
    height: 400,
    width:'50%',
    region: 'east',
    store: eastgridstore,
    colModel:eastgridcolModel,
    enableColumnMove: false,
    frame:true,  
    plugins: [new Ext.ux.plugins.GroupHeaderGrid()],   
    loadMask: true
})




var barstoretb = new Ext.data.JsonStore({  
    fields : ['day', 'Percentage'],  
    data : [{  
            day : '本日/本月',  
            Percentage : 95.222 
        },
        {
            day : '去年同日/去年同月',  
            Percentage : 22.222 
        },
    ]  
});
var hourSeriestb =  [
    {
        yField      : 'Percentage',
        displayName : '电压值',
        style       : {
        
            fillColor   : 0xAAAAFF,
            borderColor : 0x3333FF,
            lineColor   : 0x3333FF
        }
    }
]; 
var extraStyletb = {


};
var chartPaneltb = new Ext.Panel({
    //title: 'Movie Rentals',
    //renderTo: Ext.getBody(),
    width: '50%',
    region: 'center',    
    //height: 300,
    height: 400,
    title: '同比合格率柱状图',
    items: {
        xtype: 'columnchart',
        store: barstoretb,
        series: hourSeriestb,
        xField: 'day',
        yField: 'Percentage',
        extraStyle: extraStyletb,
        yAxis: new Ext.chart.NumericAxis({
            displayName: 'Rentals',                
            labelRenderer : Ext.util.Format.numberRenderer('0,0')
        })
    }
});  


var barstorehb = new Ext.data.JsonStore({  
    fields : ['day', 'Percentage'],  
    data : [{  
            day : '本日/本月',  
            Percentage : 95.222 
        },
        {
            day : '昨日/上月',  
            Percentage : 22.222 
        },
    ]  
});
var hourSerieshb =  [
    {
        yField      : 'Percentage',
        displayName : '电压值',
        style       : {
            fillColor   : 0xAAAAFF,
            borderColor : 0x3333FF,
            lineColor   : 0x3333FF
        }
    }
]; 
var extraStylehb = {


};
var chartPanelhb = new Ext.Panel({
    //title: 'Movie Rentals',
    //renderTo: Ext.getBody(),
    width: '50%',
    region: 'west',
    height: 400,
    //height: 300,
    title: '环比合格率柱状图',
    items: {
        xtype: 'columnchart',
        store: barstorehb,
        series: hourSerieshb,
        xField: 'day',
        yField: 'Percentage',
        extraStyle: extraStylehb,
        yAxis: new Ext.chart.NumericAxis({
            displayName: 'Rentals',                
            labelRenderer : Ext.util.Format.numberRenderer('0,0')
        })
    }
}); 

function downloadExcel(){
    var datefrom=DateFrom.value;
    var dateto=DateTo.value;
    params={
        datefrom:datefrom,
        dateto:dateto
    };
    var encodeParams = Ext.urlEncode(params);
    open('../../servlet/ExcelFileCreate?'+encodeParams);
}
var pointTypeStore = new Ext.data.JsonStore({
    url: '../../servlet/common/SimpleInfoLoad',
    baseParams: {
        id: 'id', 
        name: 'name', 
        tableName: 't_pointType'
    },
    autoLoad: true,
    root: 'data',
    fields: ['id', 'name']
});

function buildWindow(){
    var centerDownArea = new Ext.Panel({
        layout: 'border',
        region: 'center',
        itmes:[centergrid,eastgrid]
    })
    
     
    var southDownArea = new Ext.Panel({
        id: 'CenterDown',
        //frame:true, 
        layout: 'border',
        region: 'south',
        tbar: new Ext.Toolbar([
            {
                text: "选择监测点类型：", 
                xtype: 'label', 
                style: {
                    marginLeft: '20px'
                }
            },
            {
                xtype: 'combo',
                store: pointTypeStore,
                id: 'PointTypeCombo',
                displayField: 'name',
                valueField: 'id',
                hiddenName: 'pointTypeId',    
                mode: 'remote', 
                forceSelection: true,
                allowBlank: false,
                blankText: '不允许为空',
                triggerAction: 'all',
                fieldLabel: '监测点类型',
                emptyText: '请选择监测点类型...',
                selectOnFocus: true
            },
            '-',
            {
                text: "选择日(月)：", 
                xtype: 'label', 
                style: {
                    marginLeft: '20px'
                }
            },
            {
                width:50,
                xtype:'radio',
                name:'Choose',
                id:'ChooseDay',
                boxLabel:'日',
                checked:true
            },
            {
                width:50,
                xtype:'radio',
                name:'Choose',
                id:'ChooseMonth',
                boxLabel:'月'
            },
            '-',
            {
                xtype: 'button',
                text: '展示',
                iconCls: 'icon-search',
                width: 60,
                style: {
                    marginLeft: '20px'
                },
                handler: function() {
                    barstorehb.load({
                        data : [{  
                                day : '本日/本月',  
                                Percentage : 15.222 
                            },
                            {
                                day : '昨日/上月',  
                                Percentage : 82.222 
                            }]
                        });
                    }
                }
            ]),
            items: [
             
                chartPaneltb, chartPanelhb]

        });
        var applicationUI = new Ext.Viewport({
            layout:'border',
            items: [
                southDownArea, centerDownArea
            ]
        });
    }
    Ext.onReady(buildWindow);  